import React, { useEffect, useState } from "react";
import { Space, Table, Button } from "antd";
import { EditOutlined, DeleteOutlined, SettingOutlined } from "@ant-design/icons";
import request from "../../../api/request";

function Index() {
  // 获取数据
  const [data, setData] = useState([]);
  // 添加展开行状态管理
  const [expandedRowKeys, setExpandedRowKeys] = useState([]);

  // 横向数据列表
  const columns = [
    // 添加专门的展开/折叠按钮列
    {
      title: '',
      key: 'expand',
      width: 50,
      render: (_, record) => (
        <span
          onClick={(e) => {
            e.stopPropagation();
            const isExpanded = expandedRowKeys.includes(record.id);
            setExpandedRowKeys(isExpanded ? [] : [record.id]);
          }}
          style={{ cursor: 'pointer' }}
        >
          {expandedRowKeys.includes(record.id) ? '▼' : '►'}
        </span>
      ),
      align: 'center'
    },
    // 保留原有的#列
    {
      title: '#',
      dataIndex: 'id',
      key: 'id',
      render: (text) => <a>{text}</a>,
      align: 'center'
    },
    {
      title: "角色名称",
      dataIndex: "roleName",
      key: "roleName",
    },
    {
      title: "角色描述",
      dataIndex: "roleDesc",
      key: "roleDesc",
    },
    {
      title: "操作",
      key: "action",
      render: (_, record) => (
        <Space size="small">
          <Button type="primary" icon={<EditOutlined />} size="small">
            编辑
          </Button>
          <Button danger icon={<DeleteOutlined />} size="small">
            删除
          </Button>
          <Button style={{ backgroundColor: '#fa8c16', borderColor: '#fa8c16', color: 'white' }} icon={<SettingOutlined />} size="small">
            分配权限
          </Button>
        </Space>
      ),
    },
  ];

  useEffect(() => {
    request.get("roles").then((res) => {
      console.log(res);
      setData(res.data.data);
    });
  }, []);
  // 修改Table组件配置，移除原来的expandIcon
  return (
    <div>
      角色列表
      <Table 
        columns={columns} 
        dataSource={data} 
        rowKey="id" 
        expandable={{
          childrenColumnName: 'children',
          expandedRowKeys: expandedRowKeys,
          // 禁用默认的展开图标
          expandIcon: () => null
        }} 
      />
    </div>
  );
}

export default Index;
